<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>事件处理</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
        <div>
            <button v-on:click="counter += 1">Add 1</button>
            <p>The button above has been clicked {{ counter }} times.</p>
        </div>

        <div>
            <!-- `greet` 是在下面定义的方法名 -->
            <button v-on:click="greet">Greet</button>
        </div>

        <div>
            <!-- 内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法 -->
            <button v-on:click="say('hi')">Say hi</button>
            <button v-on:click="say('what')">Say what</button>
        </div>
    </div>
</body>

<script type="text/javascript">
    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    var app = new Vue({
        el: "#app",
        data: {
            counter: 0,
            name: '什码情况'
        },
        methods: {
            greet: function(event) {
                // `this` 在方法里指向当前 Vue 实例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                if (event) {
                    alert(event.target.tagName)
                }
            },
            say: function(message) {
                alert(message)
            }
        }
    })
</script>

</html>